<template>
  <div class="app-container">
    <div class="filter-container" id="filter-container-TmptTable">
      <el-input
          v-model="listQuery.hasdelbtn"
          size="small"
          placeholder="hasdelbtn"
          style="width: 200px; "
          class="filter-item"
          @keyup.enter.native="handleFilter"
          clearable
      />
      <el-input
          v-model="listQuery.hascompanyid"
          size="small"
          placeholder="hascompanyid"
          style="width: 200px; "
          class="filter-item"
          @keyup.enter.native="handleFilter"
          clearable
      />
      <el-input
          v-model="listQuery.styleAdddialog"
          size="small"
          placeholder="styleAdddialog"
          style="width: 200px; "
          class="filter-item"
          @keyup.enter.native="handleFilter"
          clearable
      />
      <el-input
          v-model="listQuery.isdialogAdddialog"
          size="small"
          placeholder="isdialogAdddialog"
          style="width: 200px; "
          class="filter-item"
          @keyup.enter.native="handleFilter"
          clearable
      />
      <el-input
          v-model="listQuery.treeJson"
          size="small"
          placeholder="treeJson"
          style="width: 200px; "
          class="filter-item"
          @keyup.enter.native="handleFilter"
          clearable
      />
      <el-input
          v-model="listQuery.id"
          size="small"
          placeholder="ID"
          style="width: 200px; "
          class="filter-item"
          @keyup.enter.native="handleFilter"
          clearable
      />
      <el-input
          v-model="listQuery.keyrandom"
          size="small"
          placeholder="keyrandom"
          style="width: 200px; "
          class="filter-item"
          @keyup.enter.native="handleFilter"
          clearable
      />
      <el-input
          v-model="listQuery.mode"
          size="small"
          placeholder="mode"
          style="width: 200px; "
          class="filter-item"
          @keyup.enter.native="handleFilter"
          clearable
      />
      <el-input
          v-model="listQuery.primarykey"
          size="small"
          placeholder="primarykey"
          style="width: 200px; "
          class="filter-item"
          @keyup.enter.native="handleFilter"
          clearable
      />
      <el-input
          v-model="listQuery.tablename"
          size="small"
          placeholder="tablename"
          style="width: 200px; "
          class="filter-item"
          @keyup.enter.native="handleFilter"
          clearable
      />
      <el-input
          v-model="listQuery.tablenameshow"
          size="small"
          placeholder="tablenameshow"
          style="width: 200px; "
          class="filter-item"
          @keyup.enter.native="handleFilter"
          clearable
      />
      <el-input
          v-model="listQuery.one2many"
          size="small"
          placeholder="one2many"
          style="width: 200px; "
          class="filter-item"
          @keyup.enter.native="handleFilter"
          clearable
      />
      <el-input
          v-model="listQuery.hasaddbtn"
          size="small"
          placeholder="hasaddbtn"
          style="width: 200px; "
          class="filter-item"
          @keyup.enter.native="handleFilter"
          clearable
      />
      <el-input
          v-model="listQuery.hasdownloadreportbtn"
          size="small"
          placeholder="hasdownloadreportbtn"
          style="width: 200px; "
          class="filter-item"
          @keyup.enter.native="handleFilter"
          clearable
      />
      <el-input
          v-model="listQuery.haseditbtn"
          size="small"
          placeholder="haseditbtn"
          style="width: 200px; "
          class="filter-item"
          @keyup.enter.native="handleFilter"
          clearable
      />
      <el-input
          v-model="listQuery.hashistorybtn"
          size="small"
          placeholder="hashistorybtn"
          style="width: 200px; "
          class="filter-item"
          @keyup.enter.native="handleFilter"
          clearable
      />
      <el-input
          v-model="listQuery.beanmethod"
          size="small"
          placeholder="beanmethod"
          style="width: 200px; "
          class="filter-item"
          @keyup.enter.native="handleFilter"
          clearable
      />
      <el-input
          v-model="listQuery.beanobject"
          size="small"
          placeholder="beanobject"
          style="width: 200px; "
          class="filter-item"
          @keyup.enter.native="handleFilter"
          clearable
      />
      <el-input
          v-model="listQuery.beanhistorymethod"
          size="small"
          placeholder="beanhistorymethod"
          style="width: 200px; "
          class="filter-item"
          @keyup.enter.native="handleFilter"
          clearable
      />
      <el-input
          v-model="listQuery.tablealiasname"
          size="small"
          placeholder="tablealiasname"
          style="width: 200px; "
          class="filter-item"
          @keyup.enter.native="handleFilter"
          clearable
      />
      <el-input
          v-model="listQuery.sqlcount"
          size="small"
          placeholder="sqlcount"
          style="width: 200px; "
          class="filter-item"
          @keyup.enter.native="handleFilter"
          clearable
      />
      <el-input
          v-model="listQuery.tablenamehistorysql"
          size="small"
          placeholder="tablenamehistorysql"
          style="width: 200px; "
          class="filter-item"
          @keyup.enter.native="handleFilter"
          clearable
      />
      <el-input
          v-model="listQuery.tablenamesql"
          size="small"
          placeholder="tablenamesql"
          style="width: 200px; "
          class="filter-item"
          @keyup.enter.native="handleFilter"
          clearable
      />
      <el-input
          v-model="listQuery.sqlcounthistory"
          size="small"
          placeholder="sqlcounthistory"
          style="width: 200px; "
          class="filter-item"
          @keyup.enter.native="handleFilter"
          clearable
      />
      <el-input
          v-model="listQuery.sqlpage"
          size="small"
          placeholder="sqlpage"
          style="width: 200px; "
          class="filter-item"
          @keyup.enter.native="handleFilter"
          clearable
      />
      <el-input
          v-model="listQuery.sqlpagehistory"
          size="small"
          placeholder="sqlpagehistory"
          style="width: 200px; "
          class="filter-item"
          @keyup.enter.native="handleFilter"
          clearable
      />
      <el-input
          v-model="listQuery.sqlreport"
          size="small"
          placeholder="sqlreport"
          style="width: 200px; "
          class="filter-item"
          @keyup.enter.native="handleFilter"
          clearable
      />
      <el-input
          v-model="listQuery.sqlsum"
          size="small"
          placeholder="sqlsum"
          style="width: 200px; "
          class="filter-item"
          @keyup.enter.native="handleFilter"
          clearable
      />
      <el-date-picker
          v-model="listQuery.createdate"
          type="daterange"
          value-format="yyyy-MM-dd"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="创建日期:开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          size="small"
          class="filter-item"
          clearable
      />
      <select-option
          v-model="listQuery.deleteflag"
          size="small"
          placeholder="删除标志"
          style="width: 200px; "
          class="filter-item"
          :clearable=true
          prop-name="Deleteflag"
          :prop-ds-type=1
          prop-url="/base/enum/getData4AddBy"
      />
      <el-input
          v-model="listQuery.foreignkey"
          size="small"
          placeholder="foreignkey"
          style="width: 200px; "
          class="filter-item"
          @keyup.enter.native="handleFilter"
          clearable
      />
      <el-input
          v-model="listQuery.sqlprocedure"
          size="small"
          placeholder="sqlprocedure"
          style="width: 200px; "
          class="filter-item"
          @keyup.enter.native="handleFilter"
          clearable
      />
      <el-input
          v-model="listQuery.height4adddialog"
          size="small"
          placeholder="height4adddialog"
          style="width: 200px; "
          class="filter-item"
          @keyup.enter.native="handleFilter"
          clearable
      />
      <el-input
          v-model="listQuery.width4adddialog"
          size="small"
          placeholder="width4adddialog"
          style="width: 200px; "
          class="filter-item"
          @keyup.enter.native="handleFilter"
          clearable
      />
      <el-input
          v-model="listQuery.chartjson"
          size="small"
          placeholder="chartjson"
          style="width: 200px; "
          class="filter-item"
          @keyup.enter.native="handleFilter"
          clearable
      />
      <el-input
          v-model="listQuery.chartheight"
          size="small"
          placeholder="chartheight"
          style="width: 200px; "
          class="filter-item"
          @keyup.enter.native="handleFilter"
          clearable
      />
      <el-input
          v-model="listQuery.chartwidth"
          size="small"
          placeholder="chartwidth"
          style="width: 200px; "
          class="filter-item"
          @keyup.enter.native="handleFilter"
          clearable
      />
      <el-input
          v-model="listQuery.interceptaddmethod"
          size="small"
          placeholder="interceptaddmethod"
          style="width: 200px; "
          class="filter-item"
          @keyup.enter.native="handleFilter"
          clearable
      />
      <el-input
          v-model="listQuery.intercepteditmethod"
          size="small"
          placeholder="intercepteditmethod"
          style="width: 200px; "
          class="filter-item"
          @keyup.enter.native="handleFilter"
          clearable
      />
      <el-input
          v-model="listQuery.interceptobject"
          size="small"
          placeholder="interceptobject"
          style="width: 200px; "
          class="filter-item"
          @keyup.enter.native="handleFilter"
          clearable
      />
      <el-input
          v-model="listQuery.hascheckbox"
          size="small"
          placeholder="hascheckbox"
          style="width: 200px; "
          class="filter-item"
          @keyup.enter.native="handleFilter"
          clearable
      />
      <el-input
          v-model="listQuery.datasource"
          size="small"
          placeholder="datasource"
          style="width: 200px; "
          class="filter-item"
          @keyup.enter.native="handleFilter"
          clearable
      />
      <el-button :loading="queryLoading" class="filter-item" size="small" type="primary" plain icon="el-icon-search" @click="handleFilter">
        查询
      </el-button>
      <el-button :loading="downloadLoading" class="filter-item" size="small" type="primary" plain icon="el-icon-download" @click="handleDownload">
        导出报表
      </el-button>
      <el-button v-show="hasPermission(['tmptTable:create'])" class="filter-item" size="small" type="primary" plain icon="el-icon-plus" @click="handleCreate">
        添加
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      :show-summary="false"
      :summary-method="getSummaries"
      style="width: 100%;"
      :height="tableHeight"
      @sort-change="sortChange"
      @row-click="handleRowClick"
    >
      <!-- 行展开，显示的详细信息 -->
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="hasdelbtn" >
                  <span>{{ props.row.hasdelbtn }}</span>

            </el-form-item>
            <el-form-item label="hascompanyid" >
                  <span>{{ props.row.hascompanyid }}</span>

            </el-form-item>
            <el-form-item label="styleAdddialog" >
                  <span>{{ props.row.styleAdddialog }}</span>

            </el-form-item>
            <el-form-item label="isdialogAdddialog" >
                  <span>{{ props.row.isdialogAdddialog }}</span>

            </el-form-item>
            <el-form-item label="treeJson" >
                  <span>{{ props.row.treeJson }}</span>

            </el-form-item>
            <el-form-item label="ID" >
                  <span>{{ props.row.id }}</span>

            </el-form-item>
            <el-form-item label="keyrandom" >
                  <span>{{ props.row.keyrandom }}</span>

            </el-form-item>
            <el-form-item label="mode" >
                  <span>{{ props.row.mode }}</span>

            </el-form-item>
            <el-form-item label="primarykey" >
                  <span>{{ props.row.primarykey }}</span>

            </el-form-item>
            <el-form-item label="tablename" >
                  <span>{{ props.row.tablename }}</span>

            </el-form-item>
            <el-form-item label="tablenameshow" >
                  <span>{{ props.row.tablenameshow }}</span>

            </el-form-item>
            <el-form-item label="one2many" >
                  <span>{{ props.row.one2many }}</span>

            </el-form-item>
            <el-form-item label="hasaddbtn" >
                  <span>{{ props.row.hasaddbtn }}</span>

            </el-form-item>
            <el-form-item label="hasdownloadreportbtn" >
                  <span>{{ props.row.hasdownloadreportbtn }}</span>

            </el-form-item>
            <el-form-item label="haseditbtn" >
                  <span>{{ props.row.haseditbtn }}</span>

            </el-form-item>
            <el-form-item label="hashistorybtn" >
                  <span>{{ props.row.hashistorybtn }}</span>

            </el-form-item>
            <el-form-item label="beanmethod" >
                  <span>{{ props.row.beanmethod }}</span>

            </el-form-item>
            <el-form-item label="beanobject" >
                  <span>{{ props.row.beanobject }}</span>

            </el-form-item>
            <el-form-item label="beanhistorymethod" >
                  <span>{{ props.row.beanhistorymethod }}</span>

            </el-form-item>
            <el-form-item label="tablealiasname" >
                  <span>{{ props.row.tablealiasname }}</span>

            </el-form-item>
            <el-form-item label="sqlcount" >
                  <span>{{ props.row.sqlcount }}</span>

            </el-form-item>
            <el-form-item label="tablenamehistorysql" >
                  <span>{{ props.row.tablenamehistorysql }}</span>

            </el-form-item>
            <el-form-item label="tablenamesql" >
                  <span>{{ props.row.tablenamesql }}</span>

            </el-form-item>
            <el-form-item label="sqlcounthistory" >
                  <span>{{ props.row.sqlcounthistory }}</span>

            </el-form-item>
            <el-form-item label="sqlpage" >
                  <span>{{ props.row.sqlpage }}</span>

            </el-form-item>
            <el-form-item label="sqlpagehistory" >
                  <span>{{ props.row.sqlpagehistory }}</span>

            </el-form-item>
            <el-form-item label="sqlreport" >
                  <span>{{ props.row.sqlreport }}</span>

            </el-form-item>
            <el-form-item label="sqlsum" >
                  <span>{{ props.row.sqlsum }}</span>

            </el-form-item>
            <el-form-item label="创建日期" >
                  <span>{{ props.row.createdate }}</span>

            </el-form-item>
            <el-form-item label="创建人" >
                  <span>{{ props.row.createman }}</span>

            </el-form-item>
            <el-form-item label="删除标志" >
                  <span>{{ props.row.deleteflag|getJsonName }}</span>

            </el-form-item>
            <el-form-item label="修改日期" >
                  <span>{{ props.row.modifydate }}</span>

            </el-form-item>
            <el-form-item label="修改人" >
                  <span>{{ props.row.modifyman }}</span>

            </el-form-item>
            <el-form-item label="foreignkey" >
                  <span>{{ props.row.foreignkey }}</span>

            </el-form-item>
            <el-form-item label="sqlprocedure" >
                  <span>{{ props.row.sqlprocedure }}</span>

            </el-form-item>
            <el-form-item label="height4adddialog" >
                  <span>{{ props.row.height4adddialog }}</span>

            </el-form-item>
            <el-form-item label="width4adddialog" >
                  <span>{{ props.row.width4adddialog }}</span>

            </el-form-item>
            <el-form-item label="chartjson" >
                  <span>{{ props.row.chartjson }}</span>

            </el-form-item>
            <el-form-item label="chartheight" >
                  <span>{{ props.row.chartheight }}</span>

            </el-form-item>
            <el-form-item label="chartwidth" >
                  <span>{{ props.row.chartwidth }}</span>

            </el-form-item>
            <el-form-item label="interceptaddmethod" >
                  <span>{{ props.row.interceptaddmethod }}</span>

            </el-form-item>
            <el-form-item label="intercepteditmethod" >
                  <span>{{ props.row.intercepteditmethod }}</span>

            </el-form-item>
            <el-form-item label="interceptobject" >
                  <span>{{ props.row.interceptobject }}</span>

            </el-form-item>
            <el-form-item label="hascheckbox" >
                  <span>{{ props.row.hascheckbox }}</span>

            </el-form-item>
            <el-form-item label="datasource" >
                  <span>{{ props.row.datasource }}</span>

            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column
        label="hasdelbtn"
        prop="hasdelbtn"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.hasdelbtn }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="hascompanyid"
        prop="hascompanyid"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.hascompanyid }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="styleAdddialog"
        prop="styleAdddialog"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.styleAdddialog }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="isdialogAdddialog"
        prop="isdialogAdddialog"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.isdialogAdddialog }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="treeJson"
        prop="treeJson"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.treeJson }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="ID"
        prop="id"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="keyrandom"
        prop="keyrandom"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.keyrandom }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="mode"
        prop="mode"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.mode }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="primarykey"
        prop="primarykey"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.primarykey }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="tablename"
        prop="tablename"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.tablename }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="tablenameshow"
        prop="tablenameshow"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.tablenameshow }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="one2many"
        prop="one2many"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.one2many }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="hasaddbtn"
        prop="hasaddbtn"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.hasaddbtn }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="hasdownloadreportbtn"
        prop="hasdownloadreportbtn"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.hasdownloadreportbtn }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="haseditbtn"
        prop="haseditbtn"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.haseditbtn }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="hashistorybtn"
        prop="hashistorybtn"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.hashistorybtn }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="beanmethod"
        prop="beanmethod"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.beanmethod }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="beanobject"
        prop="beanobject"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.beanobject }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="beanhistorymethod"
        prop="beanhistorymethod"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.beanhistorymethod }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="tablealiasname"
        prop="tablealiasname"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.tablealiasname }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="sqlcount"
        prop="sqlcount"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.sqlcount }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="tablenamehistorysql"
        prop="tablenamehistorysql"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.tablenamehistorysql }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="tablenamesql"
        prop="tablenamesql"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.tablenamesql }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="sqlcounthistory"
        prop="sqlcounthistory"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.sqlcounthistory }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="sqlpage"
        prop="sqlpage"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.sqlpage }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="sqlpagehistory"
        prop="sqlpagehistory"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.sqlpagehistory }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="sqlreport"
        prop="sqlreport"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.sqlreport }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="sqlsum"
        prop="sqlsum"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.sqlsum }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="创建日期"
        prop="createdate"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.createdate }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="创建人"
        prop="createman"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.createman }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="删除标志"
        prop="deleteflag"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.deleteflag|getJsonName }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="修改日期"
        prop="modifydate"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.modifydate }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="修改人"
        prop="modifyman"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.modifyman }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="foreignkey"
        prop="foreignkey"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.foreignkey }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="sqlprocedure"
        prop="sqlprocedure"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.sqlprocedure }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="height4adddialog"
        prop="height4adddialog"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.height4adddialog }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="width4adddialog"
        prop="width4adddialog"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.width4adddialog }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="chartjson"
        prop="chartjson"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.chartjson }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="chartheight"
        prop="chartheight"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.chartheight }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="chartwidth"
        prop="chartwidth"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.chartwidth }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="interceptaddmethod"
        prop="interceptaddmethod"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.interceptaddmethod }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="intercepteditmethod"
        prop="intercepteditmethod"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.intercepteditmethod }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="interceptobject"
        prop="interceptobject"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.interceptobject }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="hascheckbox"
        prop="hascheckbox"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.hascheckbox }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="datasource"
        prop="datasource"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.datasource }}</span>
        </template>
      </el-table-column>


      <!--操作Button + 页面级权限控制:hasPermission -->
      <el-table-column v-if="hasPermission(['tmptTable:update','tmptTable:delete'])" fixed="right" label="操作" align="center" min-width="130">
        <template slot-scope="{row,$index}">
          <el-button v-show="hasPermission(['tmptTable:update'])" type="primary" icon="el-icon-edit" title="编辑" size="mini" @click="handleUpdate(row)">
          </el-button>
          <el-button v-show="hasPermission(['tmptTable:delete'])" type="danger" icon="el-icon-delete" title="删除" size="mini" @click="handleDelete(row)">
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
      <form-details ref="formDetails" :row="row" :isModule="true" @createResult="createResult" @updateResult="updateResult"/>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          保存
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {fetchList, deleteApi} from './api'
import waves from '@/directive/waves' // waves directive
import { parseTime, reorgQueryParams, resizeTableHeight } from '@/utils'
import checkPermission from '@/utils/permission'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import FormDetails from './form-details.vue' // add form form dialog
// 从当前View的私有数据对象中取数据
import { pickerOptions, pickerOptionsSingleDate } from './data'
// 导入多选项组件
import SelectOption from '@/views/coding/components/SelectOption'

export default {
    name: 'TmptTable-List',

    components: { Pagination, FormDetails, SelectOption },
    directives: {waves},

    props: {
        // 作为子组件时，需要回调传值；应用场景：一对多关联查询时，点击左边查询列表，传值给右边子列表，查询子列表结果
        isModule: {
            type: Boolean,
            default: false
        },
        // 当作为侧边查询结果显示的右子组件时，接收父组件的传值，watch中查询
        parentRow: Object
    },

    filters: {
        statusFilter(status) {
            const statusMap = {
                published: 'success',
                draft: 'info',
                deleted: 'danger'
            }
            return statusMap[status]
        }
    },

    data() {
        return {
            tableKey: 0,
            list: [],
            total: 0,
            footer: [],
            listLoading: false,
            queryLoading: false,
            downloadLoading: false,
            listQuery: {
                page: 1,
                limit: 20
            },
            importanceOptions: [1, 2, 3],
            sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
            statusOptions: ['published', 'draft', 'deleted'],
            dialogFormVisible: false,
            dialogStatus: '',
            textMap: {
                update: '编辑',
                create: '新增'
            },
            downloadLoading: false,
            pickerOptions: pickerOptions,
            pickerOptionsSingleDate: pickerOptionsSingleDate,
            deleteflagList: [], // 多选项列表
            row: {},
            tableHeight:0, // 表格高度
            filterContainerHeight: 0, // 查询容器高度
            clientHeight: 0 // 浏览器高度
        }
    },

    watch: {
        // 当作为侧边查询的子组件时，接收父组件的传值，watch中查询
        parentRow(pRow) {
            this.listQuery[pRow.classInstance+'Id'] = pRow.id // parantId, 需修改成主表ID。******
            this.handleFilter()
        }
    },

    created() {
        this.getList()
    },

    mounted () {
        // 浏览器、元素大小变化时，动态调整table高度
        resizeTableHeight(this, 'filter-container-TmptTable')
    },

    methods: {
        // 页面级权限控制，调用方法如：hasPermission(['a2user:delete'])
        hasPermission(needPermisions) {
          return checkPermission(needPermisions)
        },
        // 刷新
        getList() {
            this.queryLoading = true
            this.listLoading = true
            // 重组查询条件
            const params = Object.assign({}, this.listQuery)
            reorgQueryParams(params)
            // 查询
            fetchList(params).then(result => {
                if (!result.success) {
                    this.notify(result)
                    this.queryLoading = false
                    this.listLoading = false
                    return
                }
                this.list = result.map.rows
                this.total = result.map.total
                // footer
                if (result.map.footer && result.map.footer.length>0) {
                    this.footer = result.map.footer
                }
                this.queryLoading = false
                this.listLoading = false
                ++this.tableKey
            })
        },
        // 从第一页开始查询
        handleFilter() {
            this.listQuery.page = 1
            this.getList()
        },
        // 排序
        sortChange(data) {
            const { prop, order } = data
            if (prop === 'id') {
                this.sortByID(order)
            }
        },
        sortByID(order) {
            if (order === 'ascending') {
                this.listQuery.sort = '+id'
            } else {
                this.listQuery.sort = '-id'
            }
            this.handleFilter()
        },
        // SUM
        getSummaries(param) {
            if (this.footer.length == 0) {
                return []
            }
            const sums = [];
            const { columns, data } = param;
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '合计';
                    return;
                }
                if (this.footer[0][column.property]) {
                    sums[index] = this.footer[0][column.property]
                    return;
                }
            });
            return sums;
        },
        // download excel
        handleDownload() {
            // 重组查询条件
            const params = Object.assign({}, this.listQuery)
            params.page = 1
            params.limit = 10000000
            reorgQueryParams(params)
            console.log(params)
            // 查询
            this.downloadLoading = true
            fetchList(params).then(result => {
                if (!result.success) {
                    this.notify(result)
                    this.downloadLoading = false
                    return
                }
                import('@/vendor/Export2Excel').then(excel => {
                    const tHeader = ['Id', '名称', '创建时间', '创建人']  // excel中显示的列名
                    const filterVal = ['id', 'name', 'createdate', 'createman'] // excel中显示哪些列，与tHeader对应
                    const list = result.map.rows
                    const data = this.formatJson(filterVal, list)
                    excel.export_json_to_excel({
                        header: tHeader,
                        data,
                        filename: 'excel',
                        autoWidth: true,
                        bookType: 'xlsx'
                    })
                    this.downloadLoading = false
                })
            })
        },
        formatJson(filterVal, jsonData) {
            return jsonData.map(v => filterVal.map(j => {
                if (j === 'timestamp') {
                    return parseTime(v[j])
                } else {
                    return v[j]
                }
            }))
        },
        // 添加操作 start
        handleCreate() {
            this.dialogStatus = 'create'
            this.dialogFormVisible = true
            // 消除上次出现的验证信息
            this.$nextTick(() => {
                this.$refs['formDetails'].clearValidate()
                this.$refs['formDetails'].resetTemp()
                this.$refs['formDetails'].defaultTemp()
            })
        },
        // 调用子组件操作数据
        createData() {
            this.$refs['formDetails'].createData()
        },
        // 子组件操作成功，回调此方法，关闭弹框、刷新
        createResult() {
            this.dialogFormVisible = false
            this.handleFilter()
        },
        // 编辑操作 start
        handleUpdate(row) {
            this.row = Object.assign({}, row) // copy obj
            this.row.deleteflag = this.row.deleteflag.id // 枚举对象，取id值
            this.dialogStatus = 'update'
            this.dialogFormVisible = true
            // 消除上次出现的验证信息
            this.$nextTick(() => {
                this.$refs['formDetails'].clearValidate()
            })
        },
        // 调用子组件操作数据
        updateData() {
            this.$refs['formDetails'].updateData()
        },
        // 子组件操作成功，回调此方法，关闭弹框、刷新
        updateResult() {
            this.dialogFormVisible = false
            this.getList()
        },
        // 删除操作
        handleDelete(row) {
            this.$confirm('确认删除吗？')
                  .then(_ => {
                      // delete api
                      deleteApi({ id: '' + row.id }).then((r) => {
                          this.notify(r)
                          if (r.success) {
                              this.getList()
                          }
                      })
                    // end
                  })
                  .catch(_ => {})
        },
        // 行点击事件；应用场景：一对多关联查询时，点击左边查询列表，传值给右边子列表，查询子列表结果 xxxxxx
        handleRowClick(row, column, event) {
            // 从父组件调用此方法，进行回调下
            if (this.isModule) {
                row.classInstance = 'tmptTable'
                this.$emit('input', row)
            }
        },
        getSortClass: function(key) {
            const sort = this.listQuery.sort
            return sort === `+{key}` ? 'ascending' : 'descending'
        }
    }
}
</script>
<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 100px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 40%;
  }
</style>
